<template>
  <div class="warpper-box">
    <div class="inner_box">
      <el-form :inline="true" size="small" :model="formInline" ref="formInline">
        <el-form-item label="发布日期" prop="time">
          <el-date-picker
            v-model="formInline.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="分类名称" prop="noticeType">
          <el-select v-model="formInline.noticeType" placeholder="请选择分类名称">
            <el-option label="全部" value=""></el-option>
            <el-option :label="item.name" :value="item.name" v-for="(item,index) in options" :key="index"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="loadList(true)">搜索</el-button>
           <el-button type="primary" icon="el-icon-setting" @click="reset('formInline')">重置</el-button>
           <el-button type="primary" icon="el-icon-plus" v-if="addBtn" @click="add(true)">新增</el-button><!--v-if="addBtn"-->
          <el-button type="danger" icon="el-icon-delete" v-if="delBtn" :disabled="selectItem.length == 0" @click="delBatch()">批量删除</el-button>
        </el-form-item>
      </el-form>

      <el-alert v-if="tis" :title="tis" type="success" show-icon :closable="false"/>
      <el-table :data="tableData" :row-key="getRowKeys"
       @selection-change="handleSelectionChange" ref="table" border stripe>
       <el-table-column type="selection" width="45" :reserve-selection="true"></el-table-column>
        <el-table-column label="序号" width="50" :index="1">
          <template #default="scope">
            {{ (models.pageNum - 1) * models.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="title" show-overflow-tooltip resizable label="标题">
          <template slot-scope="scope">
            <label class="link-box" @click="$refs.createNoticeDetail.openDetail(scope.row,true)">{{scope.row.title}}</label>
          </template>
        </el-table-column>
        <el-table-column prop="noticeType" show-overflow-tooltip resizable label="公告类型"></el-table-column>
        <el-table-column prop="publisher" show-overflow-tooltip resizable label="发布人" />
        <el-table-column prop="createTime" show-overflow-tooltip resizable label="发布时间" :formatter="formatDate" />
        <el-table-column label="操作">
          <template slot-scope="scope">
               <el-button type="primary" v-if="editBtn" size="mini" @click="add(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          class="page-footer"
          background
          layout="total,prev,pager,next,sizes,jumper"
          :total="models.total"
          :page-sizes="[10, 20, 30, 40, 50]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </el-row>

      <noticeForm ref="createNoticeForm" @onOk="loadList" />
      <noticeDetail ref="createNoticeDetail"></noticeDetail>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { mapGetters, mapActions } from "vuex";
import { getUserList } from "@/api/system_api";
import { getDetailByKey } from "@/api/about_api";
import { getNoticePage, delBatchNotice } from "@/api/supplier_api";
import noticeForm from "./notice_form.vue";
import noticeDetail from "@/views/supplier/notice/notice_detal.vue";
export default {
    components:{
      noticeForm,
      noticeDetail
    },
  data() {
    return {
      formInline: {
        time: [],
        noticeType:''
      },
      models: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      options:[],
        tableData: [],
      tis:"",
      selectItem: []
    };
  },
  computed:{
    addBtn(){
      return this.$store.getters.permission_btns.includes('addNoticeCode');
    },
    delBtn(){
      return this.$store.getters.permission_btns.includes('delNoticeCode');
    },
    editBtn(){
      return this.$store.getters.permission_btns.includes('editNoticeCode');
    }
  },
  mounted() {
    this.loadList(true);
      this.getInfo();
  },
  methods: {
    async loadList(formData) {
      let param = {};
      if (typeof formData == "boolean") {
        this.models.pageNum = 1;
        this.models.pageSize = 10;
      }
      if (this.formInline.time && this.formInline.time.length) {
        param.publishStartTime = this.formInline.time[0] + " 00:00:00";
        param.publishEndTime = this.formInline.time[1] + " 23:59:59";
      }
      param.noticeType = this.formInline.noticeType
      param.pageNum = this.models.pageNum;
      param.pageSize = this.models.pageSize;
      const { code, data } = await getNoticePage(param);
      if (code == 200) {
        this.tableData = data.list;
        this.models.total = data.total;
      }
      },
       formatDate(row, column) {
      const date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD  HH:mm:ss");
    },
    async getInfo() {
            const { code, data } = await getDetailByKey('tzfl');
      if (code === 200) { 
              this.options = []
                if (data) {
                    if (data.value) {
                        let arr = JSON.parse(data.value)
                        this.options = arr
                    }
                }
            }
        },
    handlePageChange(page) {
      this.models.pageNum = page;
      this.loadList();
    },
    handleSizeChange(page) {
      this.models.pageSize = page;
      this.loadList();
    },
     reset(formName){
      this.$refs[formName].resetFields();
      this.loadList(true);
      },
      getRowKeys(row) {
      return row.id
    },
    handleSelectionChange(val) {
      let selectItem = [];
      val.forEach(item =>{ 
          selectItem.push(item)
      });
      this.selectItem = selectItem;
      this.tis="已选择 "+val.length+" 项";
      if(val.length==0){
        this.tis="";
        this.selectItem = [];
      }
    },
    delBatch() {
      if(this.selectItem.length === 0){
            return this.$message.error("请勾选要删除的数据！");
        }
        this.$confirm("确认删除", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          const ids = this.selectItem.map(v => v.id)
          const {code} = await delBatchNotice(ids);
          if(code === 200){
            this.$message.success("操作成功");
            this.handleSelectionChange([])
            this.loadList(true);
          }
        }).catch(() => {});
      },
    add(row) {
      let that = this
      if (typeof row === 'boolean') {
          this.$refs.createNoticeForm.openForm(row,[])
      } else {
        let param = {}
           param.pageNum = 1;
        param.pageSize = 500;
        param.userType = '2'
        getUserList(param).then(res => {
          let { data } = res
          if (data && data.list.length) {
            this.$refs.createNoticeForm.openForm(row,data.list)
          } else {
            this.$confirm("暂无人员数据，无法发送通知", "提示", {
              confirmButtonText: "继续修改",
              cancelButtonText: "取消",
              type: "warning"
            }).then(async () => {
              that.$refs.createNoticeForm.openForm(row,[])
            }).catch(() => {});
          }
        })
        }
    }
  }
};
</script>
<style scoped></style>
